<template>
  <Card :bordered="false">
    <Table
      rowKey="order_goods_id"
      :pagination="false"
      :dataSource="record.goods"
      :columns="columns"
    >
      <!-- 商品信息 -->
      <template #goodsInfo="{ record }">
        <GoodsItem :goods="record" />
      </template>
      <!-- 商品编码 -->
      <template #goods_no="{ text }">{{ text ? text : '--' }}</template>
      <!-- 单价	 -->
      <template #goods_price="{ text, record }">
        <p :class="{ 'f-through': record.is_user_grade }">￥{{ text }}</p>
        <p v-if="record.is_user_grade">
          <Tooltip>
            <template #title>
              <span class="f-13">会员等级折扣价</span>
            </template>
            <strong>会员价：</strong>
            <span>￥{{ record.grade_goods_price }}</span>
          </Tooltip>
        </p>
      </template>
      <!-- 购买数量	 -->
      <template #total_num="{ text }">x{{ text }}</template>
      <!-- 商品总价 -->
      <template #total_price="{ text }">￥{{ text }}</template>
    </Table>
    <!-- 订单价格明细 -->
    <div class="order-price">
      <table>
        <tbody>
          <tr>
            <td>订单总额：</td>
            <td>￥{{ record.total_price }}</td>
          </tr>
          <tr v-if="record.coupon_money">
            <td>优惠券抵扣：</td>
            <td>-￥{{ record.coupon_money }}</td>
          </tr>
          <tr v-if="record.points_money">
            <td>积分抵扣：</td>
            <td>-￥{{ record.points_money }}</td>
          </tr>
          <tr v-if="record.update_price?.value">
            <td>商家改价：</td>
            <td>{{ record.update_price?.symbol }}￥{{ record.update_price.value }}</td>
          </tr>
          <tr>
            <td>运费金额：</td>
            <td>+￥{{ record.express_price }}</td>
          </tr>
          <tr>
            <td>实付款金额：</td>
            <td>
              <strong>￥{{ record.pay_price }}</strong>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import GoodsItem from '../../components/GoodsItem.vue';
import { Card, Table, Tooltip } from 'ant-design-vue';
import { OrderRecordModel } from '../../model';

const { record } = defineProps({
  record: {
    type: Object as PropType<OrderRecordModel>,
    default: () => { },
  },
});
// 商品内容表头
const columns = [
  {
    title: '商品信息',
    slots: { customRender: 'goodsInfo' },
  },
  {
    title: '商品编码',
    dataIndex: 'goods_no',
    slots: { customRender: 'goods_no' },
  },
  {
    title: '重量(Kg)',
    dataIndex: 'goods_weight',
    slots: { customRender: 'goods_weight' },
  },
  {
    title: '单价',
    dataIndex: 'goods_price',
    slots: { customRender: 'goods_price' },
  },
  {
    title: '购买数量',
    dataIndex: 'total_num',
    slots: { customRender: 'total_num' },
  },
  {
    title: '商品总价',
    dataIndex: 'total_price',
    slots: { customRender: 'total_price' },
  },
];

</script>

<style lang="less" scoped>
.order-price {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
</style>
